//canvas插件


//调用
CanvasParticle({
    vx: 4,	//小球x轴速度,正为右，负为左
    vy: 4,	//小球y轴速度
    height: 2,	//小球高宽，其实为正方形，所以不宜太大
    width: 2,
    count: 100,		//点个数
    color: "#c6c6c6", 	//点颜色
    stroke: "#ddd", 		//线条颜色
    dist: 6000, 	//点吸附距离
    e_dist: 20000, 	//鼠标吸附加速距离
    max_conn: 10 	//点到点最大连接数
  });

  
  //模拟数据

// 价格模拟服务器的数据

let data = [
    { "count": 4000, "price": 1200, "unitPrice": "0.3000" },
    { "count": 8000, "price": 2000, "unitPrice": "0.2500" },
    { "count": 40000, "price": 8000, "unitPrice": "0.2000" }
  ]
  
 //遍历data,组装成HTML代码,渲染到price-ul中
   
  let priceUl = document.querySelector('.price-ul')
  let priceAll = document.querySelector('.priceAll')
  let unitPrice = document.querySelector('.unitPrice')
  
  function renderData() {
    //保存组装好的HTML代码
    let dataHtml = '';
  
    data.forEach(function (v, i) {
      //组装数据
      dataHtml += `
      <li class="${i === 0 ? 'active' : ''}" data-price="${v.price}"  data-unit-price="${v.unitPrice}"  >${v.count}次</li>
    `
    })
  
    //渲染
    priceUl.innerHTML += dataHtml;
  }
  
  renderData();
  

   //点击priceUl,

  priceUl.addEventListener('click', function (e) {
  
    //筛选出li
    let bool = e.target.nodeName === 'LI' && e.target.className != 'record';
  
    //判断
    if (bool) {
  
      //先清除掉所有li的类名active
      for (let i = 1; i < priceUl.children.length; i++) {
        priceUl.children[i].className = ''
      };
  
      //给当前事件源添加激活样式(active)
      e.target.className = 'active'
  
  
      //设置价格
      priceAll.textContent = e.target.dataset.price;
  
      //设置单价
      unitPrice.textContent = e.target.dataset.unitPrice;
  
    }
  
  })
  
  /**
   * 5.需求: api详情选项卡
   */

  tabCard('.api-tab-menu li', '.api-tab-cont > div')
  